<template>
  <div class="">
      <p class="mb20">一级标签</p>
      <el-row :gutter="25">
        <el-col :span="6" v-for="item in levelOne">
            <div :class="item.checked?'barrage on':'barrage'" @click="selBarrage('levelOne',item)">
                <div class="con">
                    <p>
                        <label>中文：</label>
                        <span>{{item.name}}</span>
                    </p>
                    <p>
                        <label>英文：</label>
                        <span>{{item.nameEn}}</span>
                    </p>
                    <!-- <p>中文：</p>
                    <p>{{item.name}}</p>
                    <p>英文：</p>
                    <p>{{item.nameEn}}</p> -->
                </div>
                
                <!-- <span>{{item.name}}[{{item.nameEn}}]</span> -->
            </div>
        </el-col>
    </el-row>
    <el-button @click="delLabel('levelOne')" type="danger" size="small" class="w150 mb20">删除标签</el-button>
    <el-button @click="addLabel(1)" type="success" size="small" class="w150 mb20">添加一级标签</el-button>
    <el-button @click="editLabel('levelOne')" type="info" size="small" class="w150 mb20">修改标签</el-button>
    <div class="line"></div>
    <p class="mb20">二级标签</p>
      <el-row :gutter="25" v-if="levelTwo.length>0">
        <el-col :span="6" v-for="item in levelTwo">
            <div :class="item.checked?'barrage on':'barrage'" @click="selBarrage('levelTwo',item)">
                <div class="con">
                    <p>
                        <label>中文：</label>
                        <span>{{item.name}}</span>
                    </p>
                    <p>
                        <label>英文：</label>
                        <span>{{item.nameEn}}</span>
                    </p>
                    <!-- <p>中文：</p>
                    <p>{{item.name}}</p>
                    <p>英文：</p>
                    <p>{{item.nameEn}}</p> -->
                </div>
                <!-- <span>{{item.name}}[{{item.nameEn}}]</span> -->
            </div>
        </el-col>
    </el-row>
    <el-button v-if="levelTwo.length>0" @click="delLabel('levelTwo')" type="danger" size="small" class="w150 mb20">删除标签</el-button>
    <el-button v-if="this.selLevelOneObj.id" @click="addLabel(2)" type="success" size="small" class="w150 mb20">添加二级标签</el-button>
    <el-button v-if="levelTwo.length>0"  @click="editLabel('levelTwo')" type="info" size="small" class="w150 mb20">修改标签</el-button>
    <el-dialog title="添加文案" class="w750" :visible.sync="dialogTableVisible">
          <el-form ref="form" :model="form" class="msgform newstypeform" label-width="110px">
            <el-form-item label="输入标签" class="is-required">
              <el-input class="w200" v-model="form.name"  placeholder="请输入标签内容"></el-input>
            </el-form-item>
            <el-form-item label="输入英文标签" class="is-required">
              <el-input class="w200" v-model="form.nameEn" placeholder="请输入标签英文内容"></el-input>
            </el-form-item>
            <el-button type="success" class="w140" size="small" @click="addProductType">确认</el-button>
          </el-form>
      </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'productType',
  data () {
    return {
        dialogTableVisible:false,
        form:{
            name:'',
            nameEn:""
        },
        levelOne:[],
        levelTwo:[],
        operateLevel:1,
        selLevelOneObj:{},
        isAdd:true
    }
  },
  methods:{
      selBarrage(value,data){
        this[value].forEach(function (ele) {
            ele.checked=false;
        })
        data.checked=true;  
        if(value=='levelOne'){
            if(this.selLevelOneObj.id!=data.id){
                this.selLevelOneObj=data;
                this.getLevelTwo()
            }
        } 
      },
      delLabel(value){
        var flag=false;
        var obj={};
        this[value].forEach(function (ele) {
            if(ele.checked){
                flag=true;
                obj=ele;
            }
        })
        if(flag){
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url='productFirstDirectory/del';
                if(value=='levelTwo'){
                    url='productSecondDirectory/del';
                }
                this.$http.post(this.$store.state.httpApi + url+'?id='+obj.id).then(response =>{
                    if(response.status == 200){
                        if(response.data.success){
                            this.$message.success('删除成功');
                            if(value=='levelTwo'){
                                this.getLevelTwo();
                            }else{
                                this.selLevelOneObj={};
                                this.levelTwo=[];
                                this.getRows();
                            }
                        }else{
                            this.$message.error(response.data.error);
                        }   
                    }
                },response => {
                    
                    console.log('请求失败',response)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }else{
            this.$message.error('请先选择标签！');
        }
      },
    //   修改标签
      editLabel(value){
        this.isAdd=false;
        if(value=='levelOne'){
            this.operateLevel=1
        }else{
            this.operateLevel=2
        }
        var flag=false;
        var obj={};
        this[value].forEach(function (ele) {
            if(ele.checked){
                flag=true;
                obj=ele;
            }
        })
        if(flag){
            for(var j in this.form){
                this.form[j]=obj[j];
            }
            this.form.id=obj.id;
            this.dialogTableVisible=true;
        }else{
            this.$message.error('请先选择标签！');
        }
      },
      editSave(){
        var url='productFirstDirectory/update';
        if(this.operateLevel==2){
            url='productSecondDirectory/update';
        }
        this.$http.post(this.$store.state.httpApi + url,this.form).then(response =>{
            if(response.status == 200){
                if(response.data.success){
                    this.dialogTableVisible=false;
                    this.$message.success('修改成功');
                    if(this.operateLevel==2){
                        this.getLevelTwo();
                    }else{
                        this.getRows();
                    }
                }else{
                    this.$message.error(response.data.error);
                }   
            }
        },response => {
            
            console.log('请求失败',response)
        })
      },
      addLabel(value){
          this.isAdd=true;
          for(var j in this.form){
              this.form[j]='';
          }
          this.operateLevel=value;
          if(value==2){
              if(this.selLevelOneObj.id){
                  this.dialogTableVisible=true;
              }
          }else{
              this.dialogTableVisible=true;
          }
      },
      addProductType(){
          if(this.operateLevel==1){
              if(this.isAdd){
                  this.addLevelOne();
              }else{
                  this.editSave();
              }
          }else{
              if(this.isAdd){
                  this.addLevelTwo();
              }else{
                  this.editSave();
              }
          }
      },
    //  添加一级标签
      addLevelOne(){
          if(this.form.name==''||this.form.nameEn==''){
              this.$message.error('您还有必填项还没有填！');
          }else{
            var param={name:this.form.name,nameEn:this.form.nameEn};
            this.$http.post(this.$store.state.httpApi + 'productFirstDirectory/save',param).then(response =>{
                if(response.status == 200){
                    if(response.data.success){
                        this.dialogTableVisible=false;
                        this.getRows();
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error(response.data.error);
                    }       
                }
                },response => {
                    console.log('请求失败',response)
            })
          } 
      },
      //  添加二级标签
      addLevelTwo(){
          if(this.form.name==''||this.form.nameEn==''){
              this.$message.error('您还有必填项还没有填！');
          }else{
            var param={parentId:this.selLevelOneObj.id,name:this.form.name,nameEn:this.form.nameEn};
            this.$http.post(this.$store.state.httpApi + 'productSecondDirectory/save',param).then(response =>{
                if(response.status == 200){
                    if(response.data.success){
                        this.dialogTableVisible=false;
                        this.getLevelTwo();
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error(response.data.error);
                    }       
                }
                },response => {
                    console.log('请求失败',response)
            })
          } 
      },
      getRows(){
          this.$http.get(this.$store.state.httpApi + 'productFirstDirectory/all').then(response =>{
          if(response.status == 200){
                if(response.data.success){
                    response.data.data.forEach(function(element) {
                        element.checked=false;
                    });  
                    this.levelOne=response.data.data;
                }       
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
      },
      getLevelTwo(){
          this.$http.get(this.$store.state.httpApi + 'productSecondDirectory/all?parentId='+this.selLevelOneObj.id).then(response =>{
            if(response.status == 200){
                    if(response.data.success){
                        response.data.data.forEach(function(element) {
                            element.checked=false;
                        });  
                        this.levelTwo=response.data.data;
                    }       
            }else{
                console.log('接口返回失败!',response);
            }
            },response => {
                console.log('请求失败',response)
          })
      }
  },
  created(){
    this.getRows();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .line{
        height: 1px;
        background: #d8d8d8;
        margin-bottom: 23px;
    }
    .msgform{
      width:310px;
      margin:0 auto;
    }
    .mr10{
        margin-right:10px;
    }
    .barrage{
        height:100px;
        background:#F0E6DA;
        margin-bottom:20px;
        // text-align: center;
        position:relative;
        color:#666;
        cursor: pointer;
        padding:0 10px;
        // min-width: 348px;
    }
    .barrage.bg{
        background: #B79267;
        color: #fff;
    }
    .barrage .con{
        position:absolute;
        top:50%;
        transform: translateY(-50%);
        // display:block;
        // width: 100%;
    }
    .barrage .con p{
         display:flex;
         margin-bottom:5px;
    }
    .barrage .con p label{
         line-height:1;
    }
    .barrage .con p span{
        flex:1;
        line-height:1;
    }
    .barrage:after{
        content:"✔";
        position:absolute;
        right:0;
        bottom:0;
        border-bottom: 28px solid #D7CBBC;
        border-left: 28px solid transparent;
        width: 0;
        height: 0;
        text-indent: -12px;
        color:#fff;
        line-height: 36px;
    }
    .barrage.bg::after{
        border-bottom: 28px solid #000;
        opacity: 0.12;
    }
    .barrage.on:after{
      border-bottom-color: #F58467;
    }
</style>
